<!--  二级页面里的页面设置（如：新增/编辑页弹框里的表格字段设置） -->
<template>
  <div class="container pageSetting_container">
    <div class="setting">
      <div class="tips">在表格中显示以下字段</div>
      <div ref="scrollRef" class="tableData changeStylePage">
        <div v-for="(item, index) in newData" :key="index" class="tableRow">
          <div class="table-left">
            <div class="switch">
              <el-switch
                v-model="item.isShow"
                active-color="#13ce66"
                inactive-color="#999999"
                @change="changeState"
              />
            </div>
            <div class="name">{{ item.label }}</div>
            <div class="num">

              <el-popover
                placement="bottom"
                width="848"
                trigger="hover"
                popper-class="PageConfiguration_chooseWidth"
              >
                <div class="num_choose">
                  <el-slider v-model="item.width" :max="800" @change="(val)=>sliderChange(val,index)" />
                </div>
                <a slot="reference" class="num_setting">设定宽度</a>
              </el-popover>
              <div class="num_show">{{ item.width?item.width:'未设置' }}</div>
            </div>
          </div>
          <div class="line" />
          <div class="table-right">
            <svg-icon icon-class="drag2" />
          </div>
        </div>
      </div>
    </div>
    <div class="bottomBtn">
      <div class="left-button">
        <div class="openAll" @click.stop="openAllDisplaySwitch">开启所有</div>
        <div @click.stop="closeAllDisplaySwitch">关闭所有</div>
      </div>
      <div class="right-button">
        <el-button @click.stop="backDefault">恢复默认</el-button>
        <el-button type="cancel" @click.stop="cancel">取消</el-button>
        <el-button @click.stop="onSubmit">保存</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { savePageSettings, backDefault, getPageSettings } from '@/api/common/common'
import Sortable from 'sortablejs'
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters([
      'userId'
    ])
  },
  props: {
    layerid: {},
    secondPageSettingId: {},
    defaultTableColumns: {}
  },
  data() {
    return {
      saveJson: {}, // 保存时提交的数据
      newData: [],
      tableColumns: [],
      showColumn: true,
      id: undefined
    }
  },
  mounted() {
    getPageSettings({ userId: this.userId, pageId: this.secondPageSettingId }).then(res => {
      if (res.data.json) {
        const pageSettings = res.data.json
        this.id = res.data.id

        this.tableColumns = JSON.parse(JSON.stringify(pageSettings.TableColumns)) // 解决传值过来无法修改值的bug
      }

      const tableColumnsCache = JSON.parse(JSON.stringify(this.tableColumns)) // 解决传值过来无法修改值的bug

      // 2023年11月20日：通过遍历代码里写死的默认的字段，以写死的默认的字段为准，来展示

      const tableColumnsCache_old = JSON.parse(JSON.stringify(this.defaultTableColumns))

      //  2023年11月20日：新的代码里写死的字段，如果旧的已保存的页面配置里没有，加进去
      tableColumnsCache_old.forEach(item => {
        if (!tableColumnsCache.some(iitem => item.prop == iitem.prop)) {
          tableColumnsCache.push(tableColumnsCache_old.filter(iitem => item.prop == iitem.prop)[0])
        }
      })

      const tableColumnsCache_del = JSON.parse(JSON.stringify(tableColumnsCache)) // 深拷贝值来操作

      //  2023年11月20日：旧的页面设置里已保存的字段，如果新的代码里已经把这个字段去掉了，那也去掉
      tableColumnsCache_del.forEach(item => {
        if (!tableColumnsCache_old.some(iitem => item.prop == iitem.prop)) {
          tableColumnsCache.splice(tableColumnsCache.findIndex(iitem => item.prop == iitem.prop), 1)
        }
      })

      tableColumnsCache.forEach(item => {
        if ('isShow' in item === false) {
          item.isShow = true
        }
        if (!item.width) {
          item['width'] = undefined
        }
      })

      this.$set(this.saveJson, 'TableColumns', tableColumnsCache)
      this.newData = this.$deepClone(tableColumnsCache)
      this.$nextTick(() => {
        if (this.showColumn) {
          this.rowDrop()
        }
      })
    })
  },
  methods: {
    rowDrop() {
      // 此时找到的元素是要拖拽元素的父容器
      const tbody = document.querySelector('.tableData')
      const _this = this

      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const cacheData1 = _this.$deepClone(_this.newData[oldIndex])
          const cacheTableData = _this.$deepClone(_this.newData)
          cacheTableData.splice(oldIndex, 1)
          cacheTableData.splice(newIndex, 0, cacheData1)
          _this.newData = []
          const cacheScroll = _this.$refs.scrollRef.scrollTop
          setTimeout(() => { // 加延时重置表格
            _this.newData = cacheTableData
            setTimeout(() => {
              _this.$refs.scrollRef.scrollTop = cacheScroll
            }, 1)
          }, 1)
        }
      })
    },
    changeState() {
    },
    // 开启显示设置所有开关
    openAllDisplaySwitch() {
      this.newData.forEach((ele) => {
        ele.isShow = true
      })
    },
    // 关闭显示设置所有开关
    closeAllDisplaySwitch() {
      this.newData.forEach((ele) => {
        ele.isShow = false
      })
    },
    cancel() {
      this.$layer.close(this.layerid) // 关闭弹框
    },
    // 提交
    onSubmit() {
      if (this.showColumn && (this.newData.filter(item => item.isShow).length === 0)) {
        this.$message.warning('请至少保留一项显示字段')
        return
      }
      const submitData = {}
      // if (this.newData && this.newData.length > 0) {
      this.saveJson.TableColumns = this.$deepClone(this.newData)
      // }
      if (this.saveJson.TableColumns.some(e => e.width < 0) || this.saveJson.TableColumns.some(e => e.width < 0)) {
        this.$message.warning('宽度不能为负数')
        return false
      }
      submitData.userId = this.userId
      submitData.pageId = this.secondPageSettingId
      if (this.id) {
        submitData.id = this.id
      }
      submitData.json = JSON.stringify(this.saveJson)
      savePageSettings(submitData).then(res => {
        this.$message({
          message: res.msg,
          type: 'success'
        })

        location.reload() // 直接刷新页面吧
      })
    },
    backDefault() {
      backDefault({ userId: this.userId, pageId: this.secondPageSettingId }).then(res => {
        this.$message({
          message: res.msg,
          type: 'success'
        })

        location.reload() // 直接刷新页面吧
      })
    },
    sliderChange(val, index) {
      if (val !== 0 && val < 100) {
        this.newData[index].width = 100
      }
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-select__tags{
   max-width: 142.5px !important;
}
/deep/ .el-input-number.is-controls-right span {
  display: inline-block;
  height: 15px;
  width: 24px;
  line-height: 15px;
}
/deep/ .el-input-number .el-input {
  margin-top: -2px;
}
/deep/ .el-input--medium .el-input__inner {
  height: 30px !important;
  line-height: 30px;
  padding-left: 10px;
}
/deep/ .el-input-number--medium{
  line-height: 35px;
}
.changeStylePage{
  overflow-y: auto;
  flex: 1;
}

.changeStylePage /deep/ .el-input-number.is-controls-right .el-input__inner{
  padding-right: 34px;
  width: 120px;
}
.changeStyleSearch{
  overflow-y: auto;
  height: 100%;
}
.changeStyleSearch /deep/ .el-input {
    width: 180px;
}
/deep/ .svg-icon {
  height: 20px;
  width: 22px;
}
/deep/ .el-form-item__label {
  font-size: 14px !important;

  font-weight: 400;
  color: #666666;
  width: 180px;
}
.num{
.el-input,.el-select, .el-date-editor.el-input{
  width: 180px !important;
}
/deep/ .el-input__suffix{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

}
.changeStylePage /deep/ .el-input{
  width: 220px;
 }
.container {
  width: 100%;
  overflow: hidden;
  .setting {
    //height: 650px;
    width: 100%;
    padding: 20px 20px 0 20px;
    //overflow-y: auto;
    height: calc(100% - 70px);
    display: flex;flex-direction: column;
    .tips {
      margin-bottom: 20px;
      font-size: 14px;

      font-weight: 400;
      color: #666666;
    }
    .tableRow {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      &:nth-child(even) {
        background: #F7FAFF;
      }
      &:nth-child(odd) {
        background: #EBF2FF;
      }
      .table-left {
        height: 40px;
        width: 539px;
        border-right: 1px solid #efefef;
        // margin-right: 1px;
        // padding: 5px 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        .switch {
          margin: 0 24px;
        }
        .name {
          text-align: center;
          font-size: 14px;

          font-weight: 400;
          color: #333333;
        }
        .num {
          width: 180px;
          font-size: 14px;
          display: flex;
          .num_setting{
            padding-right: 20px;
            color: #387bfc;
          }
          .num_show{
            color: #c0c4cc;
          }
        }
      }
      //   .line{
      //       height: 40px;
      //       width: 1px;
      //   }
      .table-right {
        height: 40px;
        width: 80px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
      }
    }
  }
  .bottomBtn {
    padding: 20px;
    height: 70px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0px 0px 6px 0px rgba(29,65,134,.18);
    border-top: 1px solid rgba(29,65,134,.18);
    .left-button {
      font-size: 14px;

      font-weight: 400;
      color: #666666;
      display: flex;
      flex-direction: row;
      align-items: center;
      div {
        cursor: pointer;
      }
      .openAll {
        margin-right: 20px;
      }
    }
  }
}
.el-tab-pane{
  justify-content: center;
}
.container /deep/ .el-input{
  padding-right: 0px;
}
.el-tabs{
  height: calc(100% - 70px);
}
.column_one{
  /deep/ .el-form-item{
    width: calc(100% - 40px);
    .el-form-item__label{
      width: 140px;
    }
  }
}
/deep/ .el-date-editor{
  height: 30px;
}
</style>
